@charset "utf-8";
html, body {
    height: 100%;
    color: #333;
    font-size: 14px;
}

.flex {
    display: flex;
    align-items: center;
}

.d-container {
    height: 100%;
    background-color: #eef0f5;
    box-sizing: border-box;
    padding: 1% 1% 2% 1%;
    justify-content: space-between;
    flex-direction: column;
}

.container-t, .container-b {
    flex: 23;
    justify-content: space-between;
    width: 100%;
}

.container-b {
    flex: 24;
    margin-top: 1%;
}

.common-item {
    border: 1px solid #dfe1e6;
    box-sizing: border-box;
    border-top: 4px solid #333;
    height: 100%;
    background-color: #fff;
    margin-right: 1%;
    position: relative;
    overflow: hidden;
}

.common-item:last-of-type {
    margin-right: 0;
}

.item_01 {
    flex: 14;
}

.item_02 {
    flex: 20;
    border-top-color: #ed0000;
}

.item_03 {
    flex: 20;
    border-top-color: #ffb400;
}

.item_04 {
    flex: 24;
}

.common-item .item-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 0 20px;
    line-height: 35px;
    font-size: 14px;
}

.common-item .item-content {
    height: 100%;
    position: relative;
}

.item_01 .content-box {
    flex-direction: column;
    width: 100%;
    margin-top: 30px;
}

.item_01 .content-box img {
    width: 45.7%;
}

.item_01 .content-box p:first-of-type {
    margin-top: 10px;
    margin-left: 10px;
}

.item_01 .content-box p span {
    font-size: 3.125vw;
    color: #00c1ba;
    font-family: 'Impact';
}

.common-item .echarts-wrap {
    width: 100%;
    height: 100%;
}

.common-item .light {
    position: absolute;
    bottom: 1.5625vw;
    left: 0;
    width: 100%;
    justify-content: center;
}

.common-item .light img {
    margin-right: 8px;
}

.container-b .item_01 {
    flex: 56;
}

.container-b .item_02 {
    flex: 25;
    border-top-color: #333;
}

.container-b .common-item .item-content {
    /*padding-top: 35px;*/
    box-sizing: border-box;
}

.notice-list {
    padding: 0 3%;
    box-sizing: border-box;
    width: 100%;
}

.notice-list .list-item {
    border-bottom: 1px solid #eee;
    padding: 1.5vh 0;
    cursor: pointer;
}

.notice-list .item-t {
    justify-content: space-between;
    width: 100%;
}

.notice-list .p-name {
    word-break: keep-all;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    flex: 1;
    padding-right: 5%;
    color: #666;
}

.notice-list .p-time {
    width: 115px;
    font-size: 13px;
}

.notice-list .p-time span {
    margin-left: 6px;
}

.notice-list .p-info {
    color: #666;
    margin-top: 5px;
    display: none;
    font-size: 13px;
}

.notice-list .p-info p {
    line-height: 22px;
}

.notice-list .list-item.active .p-name {
    color: #333;
}

.foot {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    font-size: 12px;
    color: #333;
    line-height: .8vw;
}

.progress-container {
    box-sizing: border-box;
    padding: 20px;
    height: 100%;
}

.progress-container .project-name h1 {
    font-size: 24px;
    color: #666;
    text-align: center;
}

/*.project-info>div{
  flex: 1;
  overflow: hidden;
  text-align: center;
  font-size: 18px;
  color: #4d4d4d;
  margin-top: 10px;
  justify-content: center;
}
.project-info>div span:last-of-type{
  max-width: calc(100% - 90px);
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}*/

.project-info {
    overflow: hidden;
}

.project-info:first-child {
    line-height: 35px;
}

.project-about {
    font-size: 16px;
    margin-top: 30px;
    background-color: #f7f9fb;
    padding: 15px 10px;
    border-left: 3px solid #1890ff;
    border-radius: 4px;
}

.project-about .about-title {
    color: #666;
    float: left;
}

.project-about .about-text {
    float: right;
    width: calc(100% - 80px);
    line-height: 30px;
}

.project-about .about-text p {
    line-height: 18px;
}

.project_content_box {
    border: 1px solid #e5e5e5;
    margin-top: 16px;
    height: calc(100% - 200px);
}

.project-type {
    /*margin-top: 25px;*/
    padding: 14px;
    color: #333;
}

.project-type .type-item {
    margin-right: 25px;
    font-size: 14px;
}

.project-type .type-item img {
    margin-right: 5px;
}

.progress-box {
    /*margin-top: 10px;*/
    position: relative;
    overflow-x: auto;
    padding-bottom: 30px;
    height: calc(100% - 76px);
}

.progress-box .box-bg {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    top: 40px;
    left: 0;
    height: 47px;
    background-color: #f2f2f2;

}

.progress-box .box-content {
    align-items: flex-start;
}

.progress-item .item-th {
    line-height: 40px;
    color: #fff;
    text-align: center;
    border-right: 2px solid #fff;
    box-sizing: border-box;
    width: 100%;
    background: url("./img/beij_tab.png") no-repeat center/100% 100%;
}

.progress-item:first-child .item-th {
    background: url("./img/beij.png") no-repeat center/100% 100%;
}

.progress-item:last-child .item-th {
    background: url("./img/beij_last.png") no-repeat center/100% 100%;
}

.progress-item .item_content_box {
    width: 94%;
}

.item_content_box .item_time_box {
    color: #000;
}

.item_content_box .item_time_line {
    float: left;
    width: 14px;
    height: 14px;
    background-color: #54606b;
    border-radius: 50%;
    margin-right: 14px;
    margin-top: 3px;
}

.item-td_box {
    margin-top: 12px;
    margin-left: 6px;
    border-left: 1px solid #54606b;
    padding: 4px 0 8px 12px;
}

.progress-item.item1 {
    flex: 11;
    overflow: hidden;
}

.progress-item.item2 {
    flex-shrink: 0;
    min-width: 300px;
    width: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.progress-item.item3 {
    flex: 18;
    overflow: hidden;
}

.progress-item .item-td {
    font-size: 12px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
    width: 95%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.item_complete {
    position: absolute;
    bottom: 6px;
    right: -26px;
    transform:rotate(-40deg);
    -ms-transform:rotate(-40deg); 	/* IE 9 */
    -moz-transform:rotate(-40deg); 	/* Firefox */
    -webkit-transform:rotate(-40deg); /* Safari 和 Chrome */
    -o-transform:rotate(-40deg); 	/* Opera */
    padding: 5px 25px;
    color: #fff;
}
.item_wancheng {
    background-color: #89c997;
}

.item_weikaishi {
    background-color: #bfbfbf;
}

.item_jinxingz {
    background-color: #f5c0ba;
}

.item_table_box {
    height: 40px;
    margin: 10px 0;
    text-align: center;
    color: #333;
}

.item_table {
    line-height: 40px;
    background-color: #eaedf1;
}

.progress-item .item-td img {
    margin-right: 5px;
}

.progress-item .item-td .td-p {
    line-height: 18px;
}

/*.progress-item .item-td .td-p:last-of-type {
    width: 106%;
    justify-content: space-between;
    padding-left: 10px;
    box-sizing: border-box;
}*/

p.td-p span {
    display: inline-block;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item_beyond {
    width: 100%;
    line-height: 20px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-4 {
    border-left:1px solid #009245 !important;
    background-color: rgba(0, 146, 69, 0.3);
}

.color-3 {
    border-left:1px solid #ffc822 !important;
    background-color: rgba(255, 200, 34, 0.3);
}

.color-2 {
    border-left:1px solid #d81e06 !important;
    background-color: #f7d2cd;
}

.color-1 {
    border-left:1px solid #807d78 !important;
    background-color: #e8e8ee;
}

/* 如果有多个列表 */
.item_content_multiple {
    width: 94%;
    display: flex;
    justify-content: space-between;
}

.item_content_multiple>.item_content_box {
    width: 49%;
    float: left;
}

/*.row-1, .row-7 {*/

/*}*/

/*.row-2 {*/
/*    margin-left: 40px;*/
/*}*/

/*.row-3, .row-6, .row-9 {*/
/*    margin-left: 80px;*/
/*}*/

/*.row-4 {*/
/*    margin-left: 120px;*/
/*}*/

/*.row-5 {*/
/*    margin-left: 160px;*/
/*}*/

/*.row-6 {*/
/*    margin-left: 200px;*/
/*}*/

.progress-item .row-1 {
    /*margin-top: 47px;*/
}